<template>
  <div class="page-box">
    <el-card class="page-box-card">
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="128px" inline>
        <el-form-item label="病程关键字" prop="bcgjz">
          <el-input style="width: 200px" v-model="queryParams.bcgjz" placeholder="请输入病程关键字"></el-input>
        </el-form-item>
        <el-form-item label="超声关键字" prop="csbggjz">
          <el-input v-model="queryParams.csbggjz" placeholder="请输入超声关键字" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="姓名" prop="xm">
          <el-input style="width: 200px" v-model="queryParams.xm" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="住院号" prop="zyh">
          <el-input style="width: 200px" v-model="queryParams.zyh" placeholder="请输入住院号"></el-input>
        </el-form-item>
        <el-form-item label="入院科室" prop="ryks">
          <el-input style="width: 200px" v-model="queryParams.ryks" placeholder="请输入入院科室"></el-input>
        </el-form-item>
        <el-form-item label="入院时间" prop="enterTime">
          <el-date-picker v-model="queryParams.enterTime" type="daterange" align="right" value-format="yyyy-MM-dd"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="出院诊断" prop="cyzd">
          <el-input
            style="width: 200px"
            v-model="queryParams.cyzd"
            placeholder="请输入出院诊断"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="诊断编码" prop="zdbm">
          <el-input v-model="queryParams.zdbm" placeholder="请输入诊断编码" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="出院时间" prop="outTime">
          <el-date-picker v-model="queryParams.outTime" type="daterange" align="right" value-format="yyyy-MM-dd"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <!-- <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-folder-opened"
            :disabled="single"
            size="mini"
            @click="openMedicalRecord"
            >病案首页</el-button
          >
        </el-col> -->
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-star-on" size="mini" @click="collectData">已收藏患者</el-button>
          <el-button type="warning" plain icon="el-icon-download" size="mini" v-hasPermi="['definition:class:download']"
            @click="downloadData">导出</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="dataList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" fixed />
        <el-table-column type="index" label="序号" width="55" align="center" fixed />
        <el-table-column prop="zl_jbxx_zyh" label="住院号" width="180">
        </el-table-column>
        <el-table-column prop="xm" label="姓名" width="100"> </el-table-column>
        <el-table-column prop="jcxmmc" label="超声项目">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.jcxmmc" placement="bottom-start">
              <span style="cursor: pointer; color: #33c2ff" @click="openRcord(scope.row)">
                <!-- 超声项目 -->
                {{
                  scope.row.jcxmmc ? scope.row.jcxmmc.slice(0, 10) + "..." : ""
                }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="zl_jbxx_cyrq" label="出院日期">
        </el-table-column>
        <el-table-column prop="zl_jbxx_zytime" label="入院日期">
        </el-table-column>
        <el-table-column prop="ryks" label="入院科室"> </el-table-column>
        <!-- <el-table-column prop="zl_jbxx_zdmc" label="入院诊断"> -->
        <el-table-column prop="zl_jbxx_zdmc" label="出院诊断">
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="160">
          <template slot-scope="scope">
            <el-button type="text" :icon="scope.row.collect == 1 ? 'el-icon-star-on' :'el-icon-star-off'" size="medium"
              @click="scope.row.collect == 1 ? openMedicalCancel(scope.row): openMedicalAdd(scope.row)" />
            <el-button type="text" icon="el-icon-folder-opened" size="mini"
              @click="openMedicalRecord(scope.row)">病案首页</el-button>
            <el-button :disabled="canUse" size="mini" type="text" icon="el-icon-edit" @click="handleRecord(scope.row)"
              v-hasPermi="['system:dept:edit']">病程记录</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetails(scope.row)"
              v-hasPermi="['system:dept:edit']">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-card>
    <!-- 病程记录详情框 -->
    <el-dialog :title="title" :visible.sync="recordDialog" width="800px" append-to-body>
      <el-tabs v-model="activeName" v-if="recordData.length">
        <el-tab-pane v-for="(item, index) in recordData" :key="index" :label="item.progressType" :name="index + ''">
          <div v-html="item.progressMessage"></div>
        </el-tab-pane>
      </el-tabs>
      <el-empty v-else description="暂无文书信息"></el-empty>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 详情框 -->
    <el-dialog :title="title" :visible.sync="detailsDialog" width="1200px" append-to-body>
      <el-tabs v-model="timesName" tab-position="left" v-if="recordTimes.length" @tab-click="handleClick">
        <el-tab-pane v-for="(item, index) in recordTimes" :key="index" :label="item" :name="index + ''">
          <el-tabs v-model="activeName" v-if="showDetailsData.length">
            <el-tab-pane v-for="(data, Dindex) in showDetailsData" :key="Dindex" :label="data.progressType"
              :name="Dindex + ''">
              <div v-html="data.progressMessage"></div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
      <el-empty v-else description="暂无文书信息"></el-empty>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 超声项目 -->
    <el-dialog :title="title" :visible.sync="projectDialog" width="800px" append-to-body>
      <el-tabs v-model="projectName">
        <el-tab-pane label="检查报告结果-客观所见" name="0">
          <div>{{ projectData.kgsj }}</div>
        </el-tab-pane>
        <el-tab-pane label="检查报告结果-主观提示" name="1">
          <div>{{ projectData.zgts }}</div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelProject"> 确 定 </el-button>
        <el-button @click="cancelProject">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 病案首页 -->
    <el-dialog :title="title" :visible.sync="medicalRecordDialog" width="800px" append-to-body>
      <el-form :model="medicalRecordData" ref="medicalRecordForm" size="small" label-width="128px" inline>
        <el-form-item label="住院就诊流水号" prop="jzlsh" v-if="medicalRecordData.jzlsh">
          {{ medicalRecordData.jzlsh }}
        </el-form-item>
        <el-form-item label="数据来源" prop="sjly" v-if="medicalRecordData.sjly">
          {{ medicalRecordData.sjly }}
        </el-form-item>
        <el-form-item label="入院类型（途径）" prop="rylx" v-if="medicalRecordData.rylx">
          {{ medicalRecordData.rylx }}
        </el-form-item>
        <el-form-item label="治疗类别" prop="ZLLB" v-if="medicalRecordData.ZLLB">
          {{ medicalRecordData.ZLLB }}
        </el-form-item>
        <el-form-item label="医疗付费方式" prop="YLFFFS" v-if="medicalRecordData.YLFFFS">
          {{ medicalRecordData.YLFFFS }}
        </el-form-item>
        <el-form-item label="住院次数" prop="ZYCS" v-if="medicalRecordData.ZYCS">
          {{ medicalRecordData.ZYCS }}
        </el-form-item>
        <el-form-item label="病案号" prop="BAH" v-if="medicalRecordData.BAH">
          {{ medicalRecordData.BAH }}
        </el-form-item>
        <el-form-item label="姓名" prop="XM" v-if="medicalRecordData.XM">
          {{ medicalRecordData.XM }}
        </el-form-item>
        <el-form-item label="性别" prop="XB" v-if="medicalRecordData.XB">
          {{ medicalRecordData.XB }}
        </el-form-item>
        <el-form-item label="床号" prop="CH" v-if="medicalRecordData.CH">
          {{ medicalRecordData.CH }}
        </el-form-item>
        <el-form-item label="出生日期" prop="CSRQ" v-if="medicalRecordData.CSRQ">
          {{ medicalRecordData.CSRQ }}
        </el-form-item>
        <el-form-item label="患者年龄" prop="HZLN" v-if="medicalRecordData.HZLN">
          {{ medicalRecordData.HZLN }}
        </el-form-item>
        <el-form-item label="婚姻状况代码" prop="HYZKDM" v-if="medicalRecordData.HYZKDM">
          {{ medicalRecordData.HYZKDM }}
        </el-form-item>
        <el-form-item label="民族代码" prop="MZDM" v-if="medicalRecordData.MZDM">
          {{ medicalRecordData.MZDM }}
        </el-form-item>
        <el-form-item label="出生地名称" prop="CSDMC" v-if="medicalRecordData.CSDMC">
          {{ medicalRecordData.CSDMC }}
        </el-form-item>
        <el-form-item label="身份证号" prop="SFZH" v-if="medicalRecordData.SFZH">
          {{ medicalRecordData.SFZH }}
        </el-form-item>
        <el-form-item label="患者联系电话" prop="HZLXDH" v-if="medicalRecordData.HZLXDH">
          {{ medicalRecordData.HZLXDH }}
        </el-form-item>
        <el-form-item label="职业类别代码" prop="ZYLBDM" v-if="medicalRecordData.ZYLBDM">
          {{ medicalRecordData.ZYLBDM }}
        </el-form-item>
        <el-form-item label="现住址行政区划代码" prop="XZZXZQHDM" v-if="medicalRecordData.XZZXZQHDM">
          {{ medicalRecordData.XZZXZQHDM }}
        </el-form-item>
        <el-form-item label="现住址-省（自治区、直辖市）" prop="XZZSHENG" v-if="medicalRecordData.XZZSHENG">
          {{ medicalRecordData.XZZSHENG }}
        </el-form-item>
        <el-form-item label="现住址-市" prop="XZZSHI" v-if="medicalRecordData.XZZSHI">
          {{ medicalRecordData.XZZSHI }}
        </el-form-item>
        <el-form-item label="现住址-县/区" prop="xzzqu" v-if="medicalRecordData.xzzqu">
          {{ medicalRecordData.xzzqu }}
        </el-form-item>
        <el-form-item label="现住址-乡（镇、街道办事处）" prop="XZZXIANGZHEN" v-if="medicalRecordData.XZZXIANGZHEN">
          {{ medicalRecordData.XZZXIANGZHEN }}
        </el-form-item>
        <el-form-item label="现住址-村（街、路、弄等）" prop="XZZCUN" v-if="medicalRecordData.XZZCUN">
          {{ medicalRecordData.XZZCUN }}
        </el-form-item>
        <el-form-item label="现住址-门牌号码" prop="XZZMPH" v-if="medicalRecordData.XZZMPH">
          {{ medicalRecordData.XZZMPH }}
        </el-form-item>
        <el-form-item label="居住地（现住址）" prop="JZD" v-if="medicalRecordData.JZD">
          {{ medicalRecordData.JZD }}
        </el-form-item>
        <el-form-item label="现住址电话" prop="XZZDH" v-if="medicalRecordData.XZZDH">
          {{ medicalRecordData.XZZDH }}
        </el-form-item>
        <el-form-item label="现住址邮编" prop="XZZYB" v-if="medicalRecordData.XZZYB">
          {{ medicalRecordData.XZZYB }}
        </el-form-item>
        <el-form-item label="现住址电话" prop="XZZDH" v-if="medicalRecordData.XZZDH">
          {{ medicalRecordData.XZZDH }}
        </el-form-item>
        <el-form-item label="联系人姓名" prop="LXRXM" v-if="medicalRecordData.LXRXM">
          {{ medicalRecordData.LXRXM }}
        </el-form-item>
        <el-form-item label="联系人关系" prop="LXRGX" v-if="medicalRecordData.LXRGX">
          {{ medicalRecordData.LXRGX }}
        </el-form-item>
        <el-form-item label="联系人地址" prop="LXRDZ" v-if="medicalRecordData.LXRDZ">
          {{ medicalRecordData.LXRDZ }}
        </el-form-item>
        <el-form-item label="联系人电话" prop="LXRDH" v-if="medicalRecordData.LXRDH">
          {{ medicalRecordData.LXRDH }}
        </el-form-item>
        <el-form-item label="入院时间" prop="RYSJ" v-if="medicalRecordData.RYSJ">
          {{ medicalRecordData.RYSJ }}
        </el-form-item>
        <el-form-item label="入院科室名称" prop="RYKSMC" v-if="medicalRecordData.RYKSMC">
          {{ medicalRecordData.RYKSMC }}
        </el-form-item>
        <el-form-item label="入院病区（房）" prop="RYBQ" v-if="medicalRecordData.RYBQ">
          {{ medicalRecordData.RYBQ }}
        </el-form-item>
        <el-form-item label="出院时间" prop="CYSJ" v-if="medicalRecordData.CYSJ">
          {{ medicalRecordData.CYSJ }}
        </el-form-item>
        <el-form-item label="出院科室名称" prop="CYKSMC" v-if="medicalRecordData.CYKSMC">
          {{ medicalRecordData.CYKSMC }}
        </el-form-item>
        <el-form-item label="出院病区（房）" prop="CYBQ" v-if="medicalRecordData.CYBQ">
          {{ medicalRecordData.CYBQ }}
        </el-form-item>
        <el-form-item label="实际住院天数" prop="SJZYTS" v-if="medicalRecordData.SJZYTS">
          {{ medicalRecordData.SJZYTS }}
        </el-form-item>
        <el-form-item label="住院期间是否告知病危或病重" prop="ZYQJSFGZBWHBZ" v-if="medicalRecordData.ZYQJSFGZBWHBZ">
          {{ medicalRecordData.ZYQJSFGZBWHBZ }}
        </el-form-item>
        <el-form-item label="住病案执行标准" prop="BAZXBZ" v-if="medicalRecordData.BAZXBZ">
          {{ medicalRecordData.BAZXBZ }}
        </el-form-item>
        <el-form-item label="传染病史" prop="CRBS" v-if="medicalRecordData.CRBS">
          {{ medicalRecordData.CRBS }}
        </el-form-item>
        <el-form-item label="过敏症状出现日期" prop="GMZZCSRQ" v-if="medicalRecordData.GMZZCSRQ">
          {{ medicalRecordData.GMZZCSRQ }}
        </el-form-item>
        <el-form-item label="药物过敏源名称" prop="YWGMYMC" v-if="medicalRecordData.YWGMYMC">
          {{ medicalRecordData.YWGMYMC }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelMedical"> 确 定 </el-button>
        <el-button @click="cancelMedical">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    multiLatitudQuery,
    multiLatitudQueryShouCang,
    multiLatitudQueryyDetail,
    multiLatitudQueryDetailByGjz,
    queryBasy,
    exportData,
    multiLatitudAdd,
    multiLatitudCancel
  } from "@/api/science/filtering";
  export default {
    dicts: ["strategy_type", "strategy_danger_level", "data_source"],
    data() {
      return {
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        selectionData: [],
        queryParams: {
          // @ApiModelProperty("病程关键字")
          bcgjz: "",
          // @ApiModelProperty("入院时间")
          enterTime: [],
          rysjStartTime: "",
          rysjEndTime: "",
          // @ApiModelProperty("出院时间")
          outTime: [],
          cysjStartTime: "",
          cysjEndTime: "",
          // @ApiModelProperty("入院科室(输入)")
          ryks: "",
          // @ApiModelProperty("姓名")
          xm: "",
          // @ApiModelProperty("住院号")
          zyh: "",
          pageNum: 1,
          pageSize: 10,
          // param: {
          //   idCard: null,
          //   name: null,
          //   projectId: null,
          //   hospitalNum: null,
          //   doctorName: null,
          //   fileNum: null,
          //   archivesType: null,
          //   departmentId: null,
          //   round: null,
          //   reporting: null,
          //   treatmentTypes: null,
          //   operationWay: null,
          //   operationName: null,
          //   leaveTime: null,
          // },
        },
        tagList: [],
        dataList: [],
        total: 0,
        title: "",
        addDialog: false,
        addForm: {
          type: "",
          riskLevel: "",
          roundList: [],
          round: "",
          content: "",
        },
        rules: {
          text: [{
            required: true,
            message: "请输入变量名称",
            trigger: "blur"
          }],
          code: [{
            required: true,
            message: "请输入变量CODE",
            trigger: "blur"
          }],
        },
        recordDialog: false,
        detailsDialog: false,
        detailsData: [],
        activeName: "0",
        canUse: true,
        recordData: [],
        recordTimes: [],
        timesName: "0",
        showDetailsData: [],
        projectDialog: false,
        projectName: "0",
        projectData: {},
        medicalRecordDialog: false,
        medicalRecordData: {},
      };
    },
    created() {
      const times = this.$moment().valueOf();
      this.queryParams.enterTime = [
        this.$moment(times - 3600 * 24 * 30 * 1000).format("YYYY-MM-DD"),
        this.$moment(times).format("YYYY-MM-DD"),
      ];
      this.getList();
    },
    methods: {
      cancelProject() {
        this.projectDialog = false;
      },
      // 打开超声报告
      openRcord(row) {
        this.title = "超声项目";
        this.projectName = "0";
        this.projectData = {
          ...row
        };
        this.projectDialog = true;
      },
      // 导出数据
      downloadData() {
        const param = {
          ...this.queryParams
        };
        const params = {
          pageNum: param.pageNum,
          pageSize: param.pageSize,
          param: {
            ...param
          },
        };
        if (params.param.enterTime && params.param.enterTime.length) {
          params.param.rysjStartTime = params.param.enterTime[0];
          params.param.rysjEndTime = params.param.enterTime[1];
        } else {
          params.param.rysjStartTime = null;
          params.param.rysjEndTime = null;
        }
        if (params.param.outTime && params.param.outTime.length) {
          params.param.cysjStartTime = params.param.outTime[0];
          params.param.cysjEndTime = params.param.outTime[1];
        } else {
          params.param.cysjStartTime = null;
          params.param.cysjEndTime = null;
        }
        this.$modal.confirm("是否确认导出当前搜索条件下的多维度数据？").then(() => {
          exportData(params)
            .then((res) => {
              // const url = window.URL.createObjectURL(new Blob([res]));
              const blob = new Blob([res]);
              this.$download.saveAs(blob, "多维度数据筛选.xlsx");
              this.$message.success("导出成功");
            })
            .catch((error) => {
              this.$message.success("下载Excel失败:", error);
              console.error("下载Excel失败:", error);
            });
        });
      },
      // 取消收藏患者
      openMedicalCancel(row) {
        const jzlsh = row.jzlsh;
        multiLatitudCancel({
          jzlsh
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('取消收藏成功')
            this.getList()
            // this.collectData()
          } else {
            this.$message.error('取消收藏失败，请稍后重试！')
          }
        });
      },
      // 收藏患者
      openMedicalAdd(row) {
        multiLatitudAdd({
          ...row
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('收藏成功')
            this.getList()
            // this.collectData()
          } else {
            this.$message.error('收藏失败，请稍后重试！')
          }
        });
      },
      // 查询已收藏患者
      collectData() {
        multiLatitudQueryShouCang({
            pageNum: 1,
            pageSize: 20,
            param: {}
          })
          .then((response) => {
            this.dataList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          })
          .catch((err) => {
            this.$message.error(err);
            this.loading = false;
          });
      },
      // 打开病例的病案首页
      openMedicalRecord(row) {
        const jzlsh = row.jzlsh;
        queryBasy({
          jzlsh
        }).then((res) => {
          this.medicalRecordData = {
            ...res.data
          };
          this.title = "病案记录";
          this.medicalRecordDialog = true;
        });
      },
      cancelMedical() {
        this.medicalRecordDialog = false;
        this.medicalRecordData = {};
      },
      // 搜索事件
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      // 重置事件
      resetQuery() {
        this.dataList = [];
        this.total = 0;
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = 10;
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 获取数据列表
      getList() {
        this.loading = true;
        const params = {
          ...this.queryParams
        };
        if (params.enterTime && params.enterTime.length) {
          params.rysjStartTime = params.enterTime[0];
          params.rysjEndTime = params.enterTime[1];
        } else {
          params.rysjStartTime = null;
          params.rysjEndTime = null;
        }
        if (params.outTime && params.outTime.length) {
          params.cysjStartTime = params.outTime[0];
          params.cysjEndTime = params.outTime[1];
        } else {
          params.cysjStartTime = null;
          params.cysjEndTime = null;
        }
        const param = {
          pageNum: params.pageNum,
          pageSize: params.pageSize,
          param: {
            ...params
          },
        };
        multiLatitudQuery(param)
          .then((response) => {
            if (param.param.bcgjz) {
              this.canUse = false;
            } else {
              this.canUse = true;
            }
            this.dataList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          })
          .catch((err) => {
            this.$message.error(err);
            this.loading = false;
          });
      },
      // 列表选中事件
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.jzlsh);
        this.selectionData = [...selection];
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      // 新增/修改弹框提交事件
      // async submitForm() {
      //   const param = { ...this.addForm };
      //   if (param.roundList.length) {
      //     param.round = param.roundList.join(",");
      //   } else {
      //     param.round = "";
      //   }
      //   if (param.id) {
      //     // 修改
      //     await updateFlupInfo(param).then((res) => {
      //       this.$message.success("修改成功");
      //       this.cancel();
      //       this.handleQuery();
      //     });
      //   } else {
      //     // 新增
      //     await insertFlupInfo(param).then((res) => {
      //       this.$message.success("新增成功");
      //       this.cancel();
      //       this.handleQuery();
      //     });
      //   }
      // },
      // 新增/修改弹框取消事件
      cancel() {
        this.recordDialog = false;
        this.detailsDialog = false;
        this.activeName = "0";
        this.timesName = "0";
        this.detailsData = [];
        this.recordData = [];
      },
      // 查看详情
      handleDetails(row) {
        this.title = "详情";
        const jzlsh = row.jzlsh;
        this.recordTimes = [];
        multiLatitudQueryyDetail({
          jzlsh
        }).then((res) => {
          this.detailsData = [...res.data];
          this.changeData(res.data);
        });
      },
      // 修改详情数据结构
      changeData(list) {
        let timeArr = [];
        for (let i = 0; i < list.length; i++) {
          const item = list[i];
          timeArr.push(item.recordTimeFormat);
        }
        const newTimeArr = [...new Set(timeArr)];
        this.recordTimes = [...newTimeArr];
        const tab = {
          name: "0"
        };
        this.handleClick(tab);
        this.detailsDialog = true;
      },
      // 选择时间tab
      handleClick(tab) {
        this.showDetailsData = [];
        this.activeName = "0";
        const time = this.recordTimes[tab.name - 0];
        console.log("time: ", time);
        let arr = [];
        for (let i = 0; i < this.detailsData.length; i++) {
          const item = this.detailsData[i];
          if (item.recordTimeFormat == time) {
            arr.push(item);
          }
        }
        this.showDetailsData = [...arr];
        console.log("this.showDetailsData: ", this.showDetailsData);
      },
      // 病程记录
      handleRecord(row) {
        this.activeName = "0";
        this.timesName = "0";
        this.title = "病程记录";
        const jzlsh = row.jzlsh;
        const bcgjz = this.queryParams.bcgjz;
        multiLatitudQueryDetailByGjz({
          bcgjz,
          jzlsh
        }).then((res) => {
          this.recordData = [...res.data];
        });
        this.recordDialog = true;
      },
    },
  };
</script>
<style lang="scss">
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .row-1 {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .row-3 {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
